import React, { memo } from "react";
import * as Icon from "@ant-design/icons";
import { AntdIconProps } from "@ant-design/icons/lib/components/AntdIcon";
import { AntdIconType } from "./icon";
import { IIconConfig } from "./schema";
import logo from "@/assets/icon_01.png";

interface IconType extends IIconConfig {
  isTpl?: boolean;
}
const XIcon = memo((props: IconType) => {
  const {
    color,
    size,
    link,
    text,
    fontSize,
    fontColor,
    type,
    spin,
    isTpl
  } = props;

  const MyIcon: React.ForwardRefExoticComponent<Pick<
    AntdIconProps,
    AntdIconType
  > &
    React.RefAttributes<HTMLSpanElement>> = Icon[type];

  const handleClick = () => {
    if (!link || window.location.href.indexOf("/editor") > -1) return;
    window.location.href = link;
  };

  return isTpl ? (
    <div>
      <img style={{ width: "100%" }} src={logo} alt="" />
    </div>
  ) : (
    <div
      style={{
        display: "flex",
        width: "100%",
        height: "100%",
        alignItems: "center",
        justifyContent: "center",
        flexDirection: "column"
      }}
    >
      <MyIcon
        twoToneColor={color}
        style={{ fontSize: size }}
        spin={spin}
        onClick={handleClick}
      />
      <div style={{ fontSize, color: fontColor, paddingTop: "6px" }}>
        {" "}
        {text}{" "}
      </div>
    </div>
  );
});

export default XIcon;
